<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css"/>
		<link href="style/fjol_style.css" rel="stylesheet" />
		<link href="style/xol_style.css" rel="stylesheet" />
	</head>
	<style>

	</style>

	<body style="background: #FFFFFF;">
		
		<div class="mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--这里放置真实显示的DOM内容-->
				<div class="newbgRed pt5 pb5">
					<div class="xol-header pct80">
						<div class="mui-clearfix p10" style="line-height: 30px;">
							<a class="mui-pull-left color18 brc8c7cc mr5 p10">
								<em id="currentCity">泉州市</em>
								<span class="mui-icon icon-arrowdown"></span>
							</a>
							<div class="color9" id="openSearchPage">
								<span class="mui-icon mui-icon-search"></span> 搜索房源
							</div>
						</div>
					</div>
				</div>
				
				<!--广告轮播-->
				<div id="slider" class="mui-slider mb10">
					<div class="mui-slider-group mui-slider-loop" id="adListGroup">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->

					</div>
					<img src="images/icon_blank.png" width="100%" height="200" id="banner1" />
					<div class="mui-slider-indicator" id="adListIndicator">

					</div>
				</div>

				<!-- 资讯滚动 -->
				<div class="txtScroll-top bg-white mt5">
					<div class="bd p10 mui-clearfix">
						<span class="mui-pull-left infoList mr10">
							<img src="imageNew/icon_news@2x.png" height="10"/>
						</span>
						<ul class="mui-list-unstyled m0 color9" id="infomation">
							
						</ul>
					</div>
				</div>
				
				<!-- Swiper -->
    <div class="swiper-container-tag mt10">
        <div class="swiper-wrapper" style="line-height: normal;">
            <div class="swiper-slide">
            	<div class="mui-text-center swiper-tag-img">
            		<img src="imageNew/icon_menu_buy@2x.png" width="50%"/>
            	</div>
            	<ul class="mui-table-view mt5" style="overflow: hidden;">
					<li class="mui-media mui-col-xs-6 mui-pull-left" id="newHouse">
						<div class="mui-text-center flex" style="border: 1px solid #EEEEEE; padding: 0.84rem 0.2rem;">
							<img src="imageNew/icon_menu_new@2x.png" width="40%" >
							<span class="f08">买新房</span>
						</div>
					</li>
					<li class="mui-media mui-col-xs-6 mui-pull-left secondHandHouse" id="secondHandHouse">
						<div class="mui-text-center flex" style="border: 1px solid #EEEEEE; padding: 0.84rem 0.2rem;">
							<img src="imageNew/icon_menu_second@2x.png" width="40%" >
							<span class="f08">二手房</span>
						</div>
					</li>
					<li class="mui-media mui-col-xs-6 mui-pull-left" id="sellHouse">
						<div class="mui-text-center flex" style="border: 1px solid #EEEEEE; padding: 0.84rem 0.2rem;">
							<img src="imageNew/icon_menu_sell@2x.png" width="40%" >
							<span class="f08">卖房</span>
						</div>
					</li>
					<li class="mui-media mui-col-xs-6 mui-pull-left gotoEntrust" id="gotoEntrust">
						<div class="mui-text-center flex" style="border: 1px solid #EEEEEE; padding: 0.84rem 0.2rem;">
							<img src="imageNew/icon_menu_entrust@2x.png" width="40%" >
							<span class="f08">委托</span>
						</div>
					</li>
				</ul>
				<div class="moreSecond mui-text-center mt10 mb10">
					<span class="tag-more secondHandHouse">更多</span>
				</div>
            </div>
            <div class="swiper-slide">
            	<div class="mui-text-center swiper-tag-img">
            		<img src="imageNew/icon_menu_rent@2x.png" width="50%"/>
            	</div>
            	<ul class="mui-table-view mt5">
					<li class="mui-media rentHouse">
						<div class="mui-clearfix" style="border: 1px solid #EEEEEE; border-left: none; border-right: none; padding: 0.2rem;">
							<img src="imageNew/icon_menu_rent_pic@2x.png" class="mui-pull-left mr5 mb5" width="38%" height="40">
							<div class="p5" style="font-size: 12px;">
								<span>普通租房</span>
								<p class="f08 m0">20-30㎡单身公寓带卫生间、厨房</p>
							</div>
						</div>
					</li>
					<li class="mui-media gotoEntrust">
						<div class="mui-clearfix" style="border: 1px solid #EEEEEE; border-left: none; border-right: none; padding: 0.2rem; margin-top: -1px;">
							<img src="imageNew/icon_menu_entrust_pic@2x.png" class="mui-pull-left mr5 mb5" width="38%" height="40">
							<div class="p5" style="font-size: 12px;">
								<span>托管服务</span>
								<p class="f08 m0">鑫在线全权包办为您提供优质出租服务</p>
							</div>
						</div>
					</li>
				</ul>
				<div class="moreSecond mui-text-center mt10 mb10">
					<span class="tag-more rentHouse">更多</span>
				</div>
            </div>
            <div class="swiper-slide">
            	<div class="mui-text-center swiper-tag-img">
            		<img src="imageNew/icon_menu_life@2x.png" width="50%"/>
            	</div>
            	<ul class="mui-table-view mt5" style="overflow: hidden;">
					<li class="mui-media" id="food">
						<div class="mui-clearfix" style="border: 1px solid #EEEEEE; border-left: none; border-right: none; padding: 0.2rem;">
							<img src="imageNew/icon_menu_food@2x.png" class="mui-pull-left mr5 mb5" width="38%" height="40">
							<div class="p5" style="font-size: 12px;">
								<span>美食</span>
								<p class="f08 m0">为您推荐最好吃的美食</p>
							</div>
						</div>
					</li>
					<li class="mui-media" id="waimai">
						<div class="mui-clearfix" style="border: 1px solid #EEEEEE; border-left: none; border-right: none; padding: 0.2rem; margin-top: -1px;">
							<img src="imageNew/icon_menu_takeaway@2x.png" class="mui-pull-left mr5 mb5" width="38%" height="40">
							<div class="p5" style="font-size: 12px;">
								<span>外卖</span>
								<p class="f08 m0">您身边的人气外卖，再忙也要吃的精致</p>
							</div>
						</div>
					</li>
				</ul>
				<div class="moreSecond mui-text-center mt10 mb10">
					<span class="tag-more" id="moreLisf">更多</span>
				</div>
            </div>
            
        </div>
        
    </div>

				<!-- 房屋列表  -->
				<div class="bg-white">
					<div class="p10 pt10 pb5 bde">
						<span>好房推荐</span>
						<p class="mui-pull-right tag-more" id="moreRecommend" style="padding: 0 0.4rem; border-radius: 6px;">更多></p>
					</div>
					<ul class="mui-table-view" id="recommendHouse">

					</ul>
				</div>
				
			</div>

		</div>
		
		<script src="js/mui.min.js"></script>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/fj_public_js.js"></script>
		<script src="js/jquery.tmpl.min.js"></script>
		<script src='js/md5.js'></script>
		<script src="js/network.js"></script>
		<script src="js/common.util.js"></script>
		<script src="js/base.data.util.js"></script>
		<script src="js/enum.util.js"></script>
		<script src="js/fj_area_util.js"></script>
		<script src="js/xzx.open.js"></script>
		<script src="js/jquery.SuperSlide.2.1.1.js"></script>
		<script src="js/swiper-3.4.2.jquery.min.js"></script>

		<!-- 资讯滚动 -->
		<script id="infomationTmpl" type="text/x-jquery-tmpl">
			<li id="${id}" class="nowrap">
				${text}
			</li>
		</script>

		<!-- 房源列表 -->
		<script id="recommendHouseTmpl" type="text/x-jquery-tmpl">

			<li class="mui-table-view-cell pt10 pb10" id="${id}" style="width: 100%;">
				<a href="javascript:;" class="" style="padding-right:20px;">
					<!--<img class="mui-pull-left mr5" width="100" height="80" src="${coverImage}">-->
					<div class="mui-pull-left mr5" style="border-radius: 4px;width: 100px; height: 75px; overflow: hidden;">
		        		{{if coverImage}}
		        		<img src="${coverImage}">
		        		{{else}}
		        		<img src="images/icon_blank.png" style="max-width: 100%; max-height: 75px;">
		        		{{/if}}
		        	</div>
					<div class="mui-media-body" style="white-space: normal;">
						<span style="font-weight: bold;">${title}</span>
						<div class="mui-clearfix">
							<p class="mui-ellipsis">${bedRoomNumber}室 ${livingRoomNumber}厅 ${square}平</p>
							<div class="mui-text-right" style="color:#ef263a;">
								
									<span style="font-weight: bold;font-size: 14px;">${squarePrice}</span>
									<span style="font-size: 12px;">元/平</span> 
							</div>
							
							<p class="mui-ellipsis">${area} ${buildingName}</p>
							<div class="f08">
								{{if keyword}} {{each(i,word) $item.getKeyword()}}
								<!--<span class="mui-badge ${word.className} mui-badge-inverted">${word.value}</span>-->
								<button class="mui-btn ${word.className} keyword-btn f08">${word.value}</button> {{/each}} {{/if}}
							</div>
							
						</div>
					</div>
				</a>
			</li>
		</script>
		
		<script type="text/javascript">
			mui.init();
			//获得slider插件对象
			var gallery = mui('.mui-slider');
			gallery.slider({
				interval: 5000 //自动轮播周期，若为0则不自动播放，默认为0；
			});

    var swiper = new Swiper('.swiper-container-tag', {
        pagination: '.swiper-pagination',
        slidesPerView: 'auto',
        paginationClickable: true,
        freeMode: true
    });
			function getRecommend() {
				var recommend = enumUtils.getTagData();
				var recommendArr = [];
				var rowKeyword;
				if(recommend) {
					var count = 0;
					var recommendList = document.querySelector('#recommend');
					for(var i = 0; i < recommend.length; i++) {
						if(recommend[i].recommend) {
							var rows = recommend[i];
							rowKeyword = rows.keyword;
							if(rowKeyword) {
								++count;
								if(count <= 4) {
									recommendArr[count] = rowKeyword;

								} else {
//									break;
								}
							}

						}
					}

					return recommendArr;

				}

			}

			mui.plusReady(function() {
				openWebviewFromOthers();
				//当子页面的内容完全加载完毕后，再展示
				var currentView = plus.webview.currentWebview();
				currentView.show('slide-in-right', 300);
				plus.nativeUI.closeWaiting();

				//搜索框
				document.querySelector('#openSearchPage').addEventListener('tap', function() {
					mui.openWindow({
						url: 'fj_search.html',
						extras: {
							parentName: 'indexPage'
						}
					})
				});
				//资讯滚动
				var informationParam = [{
					key: 'page',
					value: 1
				}, {
					key: 'rows',
					value: 20
				}];
				fjNetwork.get('fjzx/common/text-ad-list.json', informationParam, function(data) {
					//				console.log(JSON.stringify(data));
					var infomationRows = data.rows;
					$('#infomationTmpl').tmpl(infomationRows).appendTo('#infomation');

					$(".txtScroll-top").slide({
						mainCell: "ul",
						effect: "topLoop",
						autoPlay: true
					});

					mui('#infomation').on('tap', 'li', function(event) {
						event.preventDefault();
						//					console.log(this.innerHTML);
					});
				})

				//今日推荐

				var recommendAr = getRecommend();
							console.log(recommendAr.length);
				for(var i = 0; i < recommendAr.length; i++) {
					$('.recommend-span').eq(i).html(recommendAr[i + 1]);
				}

				mui('#recommend').on('tap', 'li', function() {
					var h4_con = $(this).find('span').text();
					//				console.log(h4_con);
//					openWindowWithPage('house_recommend_list', {
//						headTitle: h4_con
//					});
					openWindowWithPage('secondhand_house', {
						headTitle: h4_con
					});
				});

				getTradeProgressData(fjNetwork);

				//广告轮播图 
				fjNetwork.get('fjzx/client/index-ad.json', '', function(data) {

					var adList = data.adList;
					var adListGroup = document.querySelector('#adListGroup');
					var adListIndicator = document.querySelector('#adListIndicator');
					var sliderArr = new Array();
					var adListIndicatorArr = new Array();
					sliderArr.push('<div class="mui-slider-item mui-slider-item-duplicate">');
					sliderArr.push('<a href="#">');
					sliderArr.push('<img src="' + adList[adList.length - 1].imgFullUrl + '"/>');
					sliderArr.push('</a>');
					sliderArr.push('</div>');
					for(idx in adList) {
						sliderArr.push('<div class="mui-slider-item">');
						sliderArr.push('<a href="#">');
						sliderArr.push('<img src="' + adList[idx].imgFullUrl + '" />');
						sliderArr.push('</a>');
						sliderArr.push('</div>');
						adListIndicatorArr.push('<div class="mui-indicator"></div>');
					}
					sliderArr.push('<div class="mui-slider-item mui-slider-item-duplicate">');
					sliderArr.push('<a href="#">');
					sliderArr.push('<img src="' + adList[0].imgFullUrl + '" />');
					sliderArr.push('</a>');
					sliderArr.push('</div>');
					adListGroup.innerHTML = sliderArr.join('');
					document.querySelector('#banner1').classList.add('mui-hidden');
					adListIndicator.innerHTML = adListIndicatorArr.join('');
					adListIndicator.getElementsByTagName('div')[0].classList.add('mui-active');

					//获得slider插件对象
					var gallery = mui('#slider');
					gallery.slider({
						interval: 3000 //自动轮播周期，若为0则不自动播放，默认为0；
					});
					/*获取Windows的宽度
					 * 然后按比例设置slide的图片高度 	比例9:21=3:7
					 */
					var winW = window.screen.width;
					var slideImg = $('#adListGroup img');
					for(i in slideImg) {
						slideImg.eq(i).height(winW / 7 * 3);
					}
					document.querySelector('#banner1').height = winW / 7 * 3;
				}, function(msg) {
					mui.toast(msg);
				});

				//房屋列表 
				var recommendParam = [{
					key: 'page',
					value: 1
				}, {
					key: 'rows',
					value: 10
				}];
				fjNetwork.get('fjzx/client/house-recommend-list.json', recommendParam, function(data) {
//					console.log(JSON.stringify(data));
					var recommendRows = data.rows;
					$('#recommendHouseTmpl').tmpl(recommendRows, {
						getKeyword: function() {
							var keyword = this.data.keyword;
							if(keyword) {
								var keywordArr = keyword.split(',');
								var keywordCls = [
									'keyword-color1 ',
									'keyword-color2 '
//									'keyword-color3 ',
//									'keyword-color4 '
								];
								var keywordData = new Array();
								for(var i = 0; i < 4; i++) {
									var pas = i % keywordCls.length;
									keywordData[i] = {
										className: keywordCls[pas],
										value: keywordArr[i]
									};
								}
								return keywordData;
							} else {
								return keyword = '';
							}

						}
					}).appendTo('#recommendHouse');
					
					
					var imgObj = $('#recommendHouse img');
//					console.log(imgObj.length);
					var RATE = 0.75;	//常量，图片框比例
					imgObj.each(function(){
						$(this).load(function(){
//							console.log($(this).width()+','+$(this).height());
							var rate = parseFloat($(this).height()/$(this).width());
//							console.log(rate);
							if(rate<RATE){		//高度不够
								$(this).css('height','75px');
								$(this).css('width',$(this).height()/rate);
							}else{				//宽度不够
								$(this).css('width','100px');
								$(this).css('height',$(this).width()*rate);
							}
							if($(this).width()>100){
								var marginLeft = parseInt(-($(this).width()-100)*0.5);
								$(this).css('margin-left',marginLeft);
							}
							if($(this).height()>75){
								var marginTop = parseInt(-($(this).height()-75)*0.5);
								$(this).css('margin-top',marginTop);
							}
						});
					});

					
				}, function(msg) {
					mui.toast(msg);
				});

				mui('#recommendHouse').on('tap', 'li', function() {
					mui.openWindow({
						url: 'house_detail.html',
						id: 'house_detail',
						extras: {
							houseId: this.getAttribute('id')
						}
					})
				});

				//更多推荐
				document.querySelector('#moreRecommend').addEventListener('tap', function() {
					openWindowWithPage('fj_recommend');
				});


				//默认显示当前城市
				var currentCity = areaUtils.getCurrentCity();
				document.querySelector('#currentCity').innerHTML = currentCity.areaName;

				document.addEventListener('getchildCity', function(event) {
					cityArea = event.detail.cityName;
					cityAreaIdentId = event.detail.cityAreaIdentId;
					document.querySelector('#currentCity').innerHTML = cityArea;

				});

				document.querySelector('#currentCity').addEventListener('tap', function() {

					mui.openWindow({
						url: 'fj_child_cities.html',
						//					id: 'fj_cities',
						extras: {
							parentId: 'xol_index',
							identId: currentCity.identId,
							currentCity: currentCity.areaName
						}
					})
				});

				
				mui('.secondHandHouse').each(function(){
					this.addEventListener('tap',function(){
						openWindowWithPage('secondhand_house');
					});
				})
				document.querySelector('#newHouse').addEventListener('tap', function() {
					openWindowWithPage('new_house');
				});
				
				//卖房按钮跳转
				document.querySelector('#sellHouse').addEventListener('tap', function() {
					openWindowWithPage('fj_house_list');

				});
				
				mui('.rentHouse').each(function(){
					this.addEventListener('tap',function(){
						openWindowWithPage('fj_house_list');
					});
					
				});

				mui('.gotoEntrust').each(function(){
					this.addEventListener('tap',function(){
						var main = plus.webview.currentWebview().parent();
						mui.fire(main, 'gpSellHousePage');
					});
					
				});
				
				//生活-美食
				document.querySelector('#food').addEventListener('tap',function(){
					mui.toast('敬请期待');
				});
				//生活-外卖
				document.querySelector('#waimai').addEventListener('tap',function(){
					mui.toast('敬请期待');
				});
				//生活更多
				document.querySelector('#moreLisf').addEventListener('tap',function(){
					mui.toast('敬请期待');
				});

				

				updateUserPushIdentifier();
				var net = fjNetwork;
				getBaseData(net);
				getTradeProgressData(net);
				var userInfo = common.myStorage.getItem('userInfo');
				//				document.querySelector('#txtUsername').value = userInfo.realname;

				document.addEventListener("newintent", function() {
					openWebviewFromOthers();
				});
				plus.push.addEventListener("receive", function(msg) {
					//获取透传数据
					//创建本地消息
					createLocalPushMsg(msg.payload);
				}, false);

			}); //mui.plusReady()end

			var updateUserPushIdentifier = function() {
				var info = plus.push.getClientInfo();
				//				console.log("获取客户端推送标识信息：");
				//				console.log("token: " + info.token);
				//				console.log("clientid: " + info.clientid);
				//				console.log("appid: " + info.appid);
				//				console.log("appkey: " + info.appkey);
				if(info.token.length > 0 && info.clientid.length > 0) {
					var userInfo = common.myStorage.getItem('userInfo');
					if(userInfo) {
						var param = [{
							key: 'userId',
							value: userInfo.id
						}, {
							key: 'alias',
							value: userInfo.mobile
						}, {
							key: 'clientId',
							value: info.clientid
						}, {
							key: 'deviceToken',
							value: info.token
						}];
						var net = fjNetwork;
						net.post('user/updateAppUser.json', param, function(data) {
							//成功

						}, function(message) {
							//失败

						});
					}

				}
			};
			//创建本地推送
			function createLocalPushMsg(pushPlayload) {
				mui.alert(pushPlayload);
				var options = {
					cover: false,
				};
				var content = '收到一条新消息';
				if(pushPlayload == 'DISPATCH_SALEMAN') {
					content = '您的预约看房行程已确认，我们为您安排了一位专属经纪人';
				} else if(pushPlayload == 'HOUSE_TRADING_STATE_CHANGE') {
					content = '您的房源有新的交易进展';
				}
				//				else if(pushPlayload == 'CANCEL_RESERVE_HOUSE') {
				//					content = '有客户取消了看房预约';
				//				} else if(pushPlayload == 'HOUSE_TRADING_STATE_CHANGE') {
				//					content = '收到一条新客户评价';
				//				} else if(pushPlayload == 'ADD_COMMENT') {
				//					content = '房源有新的交易进展';
				//				}
				plus.push.createMessage(content, pushPlayload, options);
			}
			//从地址获取查询参数
			function GetQueryString(url, name) {
				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				var strSearch = url.substring(url.indexOf('?'));
				var r = strSearch.substr(1).match(reg);
				if(r != null) return unescape(r[2]);
				return null;
			}
			//获取通知栏（app未启动）点击、第三方程序启动本app
			function openWebviewFromOthers() {
				var args = plus.runtime.arguments;

				if(args) {
					if(args.indexOf('xinzaixian://houseDetail') >= 0) {
						//schemes url
						var houseId = GetQueryString(args, 'houseId');
						var kind = GetQueryString(args, 'kind');
						if(houseId==0){
							
						}else{
							mui.openWindow({
								url: 'house_detail.html',
								id: 'house_detail',
								extras: {
									houseId: houseId,
									kind: kind
								}
							})
						}
						
					}else if(args.indexOf('xinzaixian://buildingDetail') >= 0) {
						//schemes url
						var buildingId = GetQueryString(args, 'buildingId');
						mui.openWindow({
							url: 'house_detail.html',
							id: 'house_detail',
							extras: {
								houseId: houseId,
								kind: kind
							}
						})
					}else if(args.indexOf('xinzaixian://shopDetail') >= 0) {
						//schemes url
						var shopId = GetQueryString(args, 'shopId');
						mui.openWindow({
							url: 'house_detail.html',
							id: 'house_detail',
							extras: {
								houseId: houseId,
								kind: kind
							}
						})
					}

					else {
						var pushPlayload = args;
						var content = '收到一条新消息';
						if(pushPlayload == 'DISPATCH_SALEMAN') {
							content = '系统已为你安排预约客户，请到“我的预约”中查看';
						} else if(pushPlayload == 'HOUSE_TRADING_STATE_CHANGE') {
							content = '房源有新的交易进展，请到“交易进度”中查看';
						}
						//					else if(pushPlayload == 'CANCEL_RESERVE_NEW_BUILDING') {
						//						content = '有客户取消了新楼盘的看房预约，请到“我的预约”中查看';
						//					} else if(pushPlayload == 'CANCEL_RESERVE_HOUSE') {
						//						content = '有客户取消了看房预约，请到“我的预约”中查看';
						//					} else if(pushPlayload == 'ADD_COMMENT') {
						//						content = '房源有新的交易进展，请到“我的服务”中查看';
						//					}
						mui.alert(content, '收到新消息', '知道了', function(e) {
							e.index;
							if(pushPlayload == 'DISPATCH_SALEMAN') {
								openFileWindowWithPage('personal_pages', 'xol_reservation'); //我的预约
							} else if(pushPlayload == 'HOUSE_TRADING_STATE_CHANGE') {
								openFileWindowWithPage('personal_pages', 'xol_entrust'); //交易进度
							}
						}, 'div');
					}

				}
			};
		</script>
	</body>

</html>